User Interface Customisation for Web Deployment

Knowledge Builder provides developers with the ability to customise the look and feel of their web applications. This section describes how this customisation can be implemented using a combination of Dialog Properties and external CSS file.

Dialog Design

A single Dialog Object in Knowledge Builder can be used to capture the values of one or more Knowledge Builder Object (or Variable) on a single web page. Dialogs can also used to display information and reports. An Application can have any number of Dialogs, which are invoked as and when they are encountered by the application logic.

The Knowledge Builder Dialog editor allows the style and content of a Dialog object to defined by the developer.

1.1 Dialogs for Data Capture

Knowledge Builder Objects and Variables can be tied to various types of Dialog Controls. Different Dialog Controls provide different ways of capturing the same data at runtime.

· Controls for List & Boolean Objects

· Listbox

· Listbox (values as hyperlinks)

· Drop-down ComboBox,

· Radio Buttons,

· Check-box,

· Hotspots,

· Grid

· Numeric Editor Control is used to capture values for Numeric Objects

· Date Control is used to capture values for Date Objects

· Variable Editor Control is used to capture values for String & Numeric Variables

1.2 Generic Capture Dialogs

This is a technique whereby a single dialog is used by a number of Objects, which are to be captured as and when they are encountered during inference (one-at-a-time).

For List, Boolean, Numeric & Date Object capture, this is achieved by tying the same Dialog to all the required Objects and by not specifying a TiedItem for the Control used on this dialog. Note that a dialog object can also be tied to a Base Class which then shared by all its child objects)

This un-tied control will dynamically (at runtime) acquire the name of the Object whose TiedDialog property is set to the Dialog name that contains the control.

To share the same dialog for multiple text capture (using String Variables) the "Variable Template Dialog" of a Knowledge Module must be set to the generic Dialog and by not specifying a TiedItem for the Variable Edit control (none).

A Label control can also be used to display the value of any property (of the dynamically allocated Object) by embedding the name of the property, proceeded by two underscore characters. E.g. {__description} to display the description of the Object.

Alternative List Control (Hyperlink Jumps)

A List control can also be displayed as a list of hyperlink jumps (AltControlType=true). Clicking on a link is equivalent to selecting the Object value represented by this link and clicking an (implied) OK button to leave the dialog. Therefore this feature should only be used to capture one List or Boolean Object per Dialog.

Additional Dialog Control Features

·Help Text. If the (helpText) property of an Object contains text then (at runtime) a special icon will appear next the control it is tied to. On clicking this icon, the text is displayed in a special help text window. The icon image can be set via the CssClassName (see section on using CSS)

·Missing Data Indicators. If an attempt is made to exit a dialog (e.g. via OK button) without capturing all the mandatory date, then a special icon will appear next to the controls requiring a value. The icon image can be set via the CssClassName (see section on using CSS)

·Invalid Values. For Knowledge Builder Editions supporting constraint inference, the following is applicable

·An invalid list value is displayed in grey and cannot be selected (showInvalid=true & allowInvalid=false)

·An invalid list value is not displayed (showInvalid=false)

·A selected invalid list value (showInvalid=true & allowInvalid=true) is displayed in red

·An invalid Numeric value is displayed in red

1.3 Dialogs for Data Display

There are 3 controls, which can be used to display information: Label, Image & Web Page.

Control Type of Information Display  
Label Text

HTML/JavaScript

Borders

Embed Object Values

Embed Functions

Scrolling Option

Display Property of dynamically allocated object

Image bmp, jpegs, gif, ico, png,

wmf & emf

 
Web Page (iframe) URL  

1.4 Actions

User-triggered Actions

Control Type of Action Comments
Button OK, BACK, URL & Exit

Macro (for XpertRule commands)

"Invisible" isArea
Label JavaScript code With access to XRKB variables via (SetValue) & (GetValue) api functions
Listbox,

Drop-down Combobox, Radio Buttons, Check-boxes, Hotspots & Grid

XpertRule Commands via

OnUpdate Event of tied Object (fired when a value is selected or deselected)

XRKB Commands
Numeric Edit,

Date Edit

XpertRule Commands via

OnUpdate Event of tied Object (fired when a value is changed & the focus is moved off the control)

XRKB Commands
Variable Editor XpertRule Commands via

OnChange Event Procedure tied to Control

XRKB Commands

Dialog Event-driven Actions

·OnEnter Event Procedure

·OnCanExit Event Procedure

·OnExit Event Procedure

·Timeout (exit after specified number of seconds)

1.5 Using the Tab Control

A Tab Control allows other Controls to be grouped into multiple tab sheets (of the same web page). The Controls on the active sheet are displayed and the user can select other active sheets to reveal their controls. A Dialog can contain a number of different Tab Controls (each with multiple sheets). Controls placed outside a Tab Control will appear at runtime regardless of active tab sheet.

1.6 Dialog Design Inheritance

A new Dialog object can be defined as "child" dialog of any existing dialog Object. The Child dialog inherits all the controls of the parent dialog. The inherited controls can only be modified from the parent dialog.

1.7 Using Cascading Stylesheets (CSS)

·CSS development

·CSS / jQuery UI development

1.8 Dialog Preview

The Dialog Editor allows the developer to preview the runtime look and feel of a Dialog, by rendering a stand-alone page via the default Web Browser

Deployment UI Options

Dialog Web Features

Class Names in default External CSS file (xr_main.css)